{% extends "base.html" %}

{% block title %}个人信息{% endblock %}

{% block content %}
<div class="container mt-4">
    <h1>个人设置</h1>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">个人信息</h5>
            <!-- 这里添加个人设置表单 -->
            <form method="post" action="{{ url_for('user_interface.profile') }}">
                <!-- 表单内容 -->
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" value="{{ current_user.username }}">
                </div>
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{ current_user.email }}">
                </div>
                <button type="submit" class="btn btn-primary mt-3">保存设置</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
window.addEventListener('load', function() {
    new Vue({
        el: '.profile-container',
        data() {
            return {
                user: window.store.state.user || {
                    avatar: '/static/images/avatar.png',
                    name: '管理员',
                    role: 'admin'
                },
                profileForm: {
                    username: 'admin',
                    displayName: '管理员',
                    email: 'admin@example.com',
                    phone: '13800138000'
                },
                passwordForm: {
                    currentPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                }
            }
        },
        methods: {
            async saveProfile() {
                try {
                    const data = await window.store.fetchData('/api/user/profile', {
                        method: 'POST',
                        body: JSON.stringify(this.profileForm)
                    });
                    if (data) {
                        window.ElementUI.Message.success('保存成功');
                    }
                } catch (error) {
                    window.ElementUI.Message.error('保存失败');
                }
            },
            async changePassword() {
                if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                    window.ElementUI.Message.error('两次输入的密码不一致');
                    return;
                }
                try {
                    const data = await window.store.fetchData('/api/user/password', {
                        method: 'POST',
                        body: JSON.stringify(this.passwordForm)
                    });
                    if (data) {
                        window.ElementUI.Message.success('密码修改成功');
                        this.passwordForm = {
                            currentPassword: '',
                            newPassword: '',
                            confirmPassword: ''
                        };
                    }
                } catch (error) {
                    window.ElementUI.Message.error('密码修改失败');
                }
            }
        }
    });
});
</script>
{% endblock %} 